<template>
  <div>
    <div slot="tip" class="panel panel-default panel-search">
      <el-form :inline="true">
        <el-row>
          <el-form-item label="部门" prop="departmentId">
            <department-select
              :fnChange="search"
              v-model="page.query.param.departmentId"
              :clearable="true"
            ></department-select>
          </el-form-item>
          <el-form-item label="员工" prop="employeeId">
            <employee-select
              :fnChange="search"
              v-model="page.query.param.employeeId"
              :departmentId="page.query.param.departmentId"
              :clearable="true"
            >
            </employee-select>
            <el-button type="primary" @click="findEmployee" v-keycode="'ENTER'"
              >选择员工</el-button
            >
          </el-form-item>

          <el-form-item label="周期" prop="periodId">
            <period-select
              :fnChange="buildDataRanges"
              ref="periodSelect"
              v-model="page.query.param.periodId"
              :clearable="true"
            ></period-select>
          </el-form-item>

          <el-form-item label="日期">
            <el-date-picker
              style="width: 305px"
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy年MM月dd日"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="search" v-keycode="'ENTER'"
              >查询</el-button
            >
            <el-button @click="cancel">取消</el-button>

            <el-button plain @click="exportRecords">
              <span style="color: green">导出</span>
            </el-button>
            <el-button type="primary" plain @click="createMake">
              <span style="color: red">计算</span>
            </el-button>
            <!-- <el-button type="primary" plain @click="create">新增</el-button> -->
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <!--<v-toolbar type="alert" style="margin-left:-5px">-->
    <!--&lt;!&ndash;<el-button slot='tip' type="primary" plain @click="create">新增</el-button>&ndash;&gt;-->
    <!--&lt;!&ndash;<el-button type="primary" plain @click="create">新增</el-button>&ndash;&gt;-->
    <!--</v-toolbar>-->
    <div width="50%">
      <!--:click="clickRow"-->

      <v-table
        ref="table"
        :dblclick="edit"
        :page="page"
        :table-minheight="450"
        @dataloaded="onDataloaded"
      >
        <el-table-column prop="abnormalFlag" label="异常" width="60">
          <template slot-scope="{ row }">
            <span :style="row.abnormalFlag ? 'color:red' : 'color:black'">
              {{ row.abnormalFlag ? "是" : "否" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="department"
          :sortable="true"
          label="部门"
          width="80"
          ><template slot-scope="{ row }">
            <span style="color: black">{{ row.employee.department.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="employee"
          :sortable="true"
          label="工号"
          width="80"
        >
          <template slot-scope="{ row }">
            <span style="color: black">{{
              (row.employee || { workID: "-" }).workID
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="employee"
          :sortable="true"
          label="员工"
          width="100"
        >
          <template slot-scope="{ row }">
            <span style="color: black">{{
              (row.employee || { name: "-" }).name
            }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="workday"
          :sortable="true"
          label="日期"
          width="111"
        >
          <template slot-scope="{ row }">
            <span style="color: black">
              {{ $dongxwDict.viewDate(row.workday) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="week" :sortable="true" label="星期" width="80">
          <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.week }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="rWorkdays" label="出勤天数" width="80">
          <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.rWorkdays }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="absentDays" label="缺勤天数" width="80">
          <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.absentDays }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="rHdaysPay" label="有薪假" width="80">
          <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.rHdaysPay }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="rHdays" label="无薪假" width="75">
          <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.rHdays }}
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="sickDay" label="病假" width="67">
          <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.holidayDefine.sickDay }}
            </span>
          </template>
        </el-table-column>

        <!--  <el-table-column prop="tripDay" label="出差" width="67">
          <template slot-scope="{ row }">
            <span style="color: black">
             {{ row.holidayDefine.tripDay }}
            </span>
          </template>
        </el-table-column>   -->

        <el-table-column prop="noCardTimes" label="缺卡次数" width="80">
          <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.noCardTimes }}
            </span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop='rOvertime'   label='加班工时' width='80'>
		<template slot-scope='{row}'>
						<span style='color:black'>
							{{row.rOvertime}}
						</span>
		</template>
	</el-table-column> -->
        <el-table-column prop="rOvertimeNormal" label="平时加班" width="80">
          <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.rOvertimeNormal }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="rOvertimeWeekday" label="周休日加班" width="90">
          <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.rOvertimeWeekday }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="rOvertimeHoliday" label="节假日加班" width="90">
          <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.rOvertimeHoliday }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="delayTimes" label="迟到次数" width="80">
          <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.delayTimes }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="delayN" label="迟到分钟" width="80">
          <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.delayN }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="eLeaveTimes" label="早退次数" width="80">
          <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.eLeaveTimes }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="eLeaveN" label="早退分钟" width="80">
          <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.eLeaveN }}
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="abnormal" label="异常原因" width="80">
          <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.abnormal }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="createdBy" label="创建人" width="80">
          <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.userName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column width="80" label="操作" :fixed="'right'">
          <template slot-scope="scope">
            <el-button type="text" title="编辑" @click="edit(scope.row)">
              <i class="el-icon-edit"></i>
            </el-button>
         <!--    <el-button
              type="text"
              @click="del(scope.row, scope.$index)"
              title="删除"
            >
              <span style="color: red">
                <i class="el-icon-delete red"></i
              ></span>
            </el-button> -->
          </template>
        </el-table-column>
      </v-table>
    </div>
    <v-dialog ref="formDiag" :width="'45%'" title="信息编辑">
      <form-panel @saved="onFormSaved"></form-panel>
      <div slot="footer">
        <el-button type="primary" @click="$refs.formDiag.dispatch('submit')"
          >保存</el-button
        >
        <el-button
          type="default"
          @click="
            () => {
              $refs.formDiag.hide();
            }
          "
          >取消</el-button
        >
      </div>
    </v-dialog>

    <v-dialog
      ref="formFindDiag"
      :appendToBody="true"
      title="查找"
      :width="'48%'"
    >
      <employee-multi-select
        v-model="page.query.param.employeeId"
        :confirmFind="confirmFind"
        :cancelFind="cancelFind"
      >
        <!--<el-button type="primary" @click="$refs.formDiag.dispatch('submit')">确定</el-button>-->
        <!--<el-button type="default" @click="()=>{$refs.formDiag.hide();}">取消</el-button>-->
      </employee-multi-select>
    </v-dialog>

    <v-dialog ref="formMakeDiag" :width="'720px'" title="计算">
      <make-form-panel @saved="onMakeFormSaved"></make-form-panel>
      <div slot="footer">
        <el-button type="primary" @click="$refs.formMakeDiag.dispatch('submit')"
          >计 算</el-button
        >
        <el-button
          type="default"
          @click="
            () => {
              $refs.formMakeDiag.hide();
              $nextTick(search);
            }
          "
          >关闭</el-button
        >
      </div>
    </v-dialog>
  </div>
</template>
<style rel="stylesheet/less" scoped lang="less">
.status_green {
  color: green;
}
</style>

<script>
import DepartmentSelect from "@/components/widgets/hr/DepartmentSelect.vue";
import EmployeeSelect from "@/components/widgets/hr/EmployeeSelect.vue";
import EmployeeMultiSelect from "@/components/widgets/hr/EmployeeMultiSelect.vue";

import PeriodSelect from "@/components/widgets/attend/PeriodSelect.vue";
import ClassMasterSelect from "@/components/widgets/attend/ClassMasterSelect.vue";

import FormPanel from "./Form";
import MakeFormPanel from "./MakeForm";

export default {
  components: {
    EmployeeMultiSelect,
    EmployeeSelect,
    ClassMasterSelect,
    PeriodSelect,
    FormPanel,
    MakeFormPanel,
    DepartmentSelect,
  },
  props: {
    fatherMethodShowSub: {
      type: Function,
      default: null,
    },
  },
  data() {
    return {
      DICT: {
        CLASSTYPE: {
          10: "10--正常班",
          20: "20--加班",
          30: "30--休班",
        },
        SUBCLASSTYPE: {
          10: "10--正常班",
          20: "20--加班",
          21: "21--平时加班",
          22: "22--周末加班",
          23: "23--节假日加班",
          30: "30--出差",
          31: "31--请假",
          32: "32--调休",
          33: "33--休假",
          34: "34--事假",
          35: "35--病假",
        },
      },
      dateRange: [],
      formStatus: 1,
      summaryMap: {},

      page: {
        query: {
          orderBys: "departmentId|asc,employeeId|asc,workday|asc",
          param: {
            name: "",
            periodId: null,
            period: {},
            isDeleted: false,
          },
        },
        getData: this.$api.attend.attend.DaysService.query,
      },
      tableActions: [
        {
          name: "编辑",
          handle: this.edit,
        },
        {
          name: "删除",
          handle: this.del,
          style: "color:red",
        },
      ],
    };
  },
  computed: {},

  methods: {
    findEmployee() {
      this.$refs.formFindDiag.show();
    },

    confirmFind(row) {
      this.$refs.formFindDiag.hide();
      this.page.query.param.employeeId = row.id;
      this.search();
    },
    cancelFind() {
      this.$refs.formFindDiag.hide();
    },

    onDataloaded(rsp) {
      //console.log(JSON.stringify(rsp.data))

      console.log(this.$refs.table.getTableData());
    },
    /*
            导出
             */
    exportRecords() {
      let params = _.cloneDeep(this.getSearchParams());
      params.param.parentId = null;
      if (this.dateRange.length == 0) {
        this.$message({
          type: "error",
          message: "请选择时间范围！",
        });
      }
      //this.$("确定删除此记录吗?", "提示", {

      this.$api.attend.attend.ReportService.exportDays(params);
    },

    create() {
      this.$refs.formDiag.show();
    },
    createMake() {
      this.$refs.formMakeDiag.show();
    },
    edit(row) {
      this.$refs.formDiag.show({ daysId: row.daysId });
    },

    del(row) {
      this.$confirm("确定删除此记录吗?", "提示", {
        type: "warning",
      }).then(() => {
        this.$api.attend.attend.DaysService.deleteById(row.daysId).then((rsp) => {
          this.search();
          this.$msgJsonResult(rsp);
        });
      });
    },

    onMakeFormSaved() {
      this.$refs.formMakeDiag.hide();
      this.$nextTick(this.search);
    },

    onFormSaved() {
      this.$refs.formDiag.hide();
      this.$nextTick(this.search);
    },
    init(options = {}) {
      if (options.daysId) {
        this.segmentId = options.daysId;
      }
      this.search();
    },
    getSearchParams() {
      this.page.query.dateRanges = {};
      if (this.dateRange && this.dateRange.length > 0) {
        this.page.query.dateRanges["workday"] = {
          startDate: this.dateRange[0],
          endDate: this.dateRange.length > 1 ? this.dateRange[1] : null,
        };
      }
      return this.page.query;
    },

    buildDataRanges() {
      if (this.page.query.param.periodId != null) {
        this.$api.attend.attend.PeriodService.findById(
          this.page.query.param.periodId
        ).then((r) => {
          //console.log(JSON.stringify(r));
          if (r.data != null) {
            this.dateRange = [r.data.startDay, r.data.endDay];
            this.getSearchParams();
            //  console.log(JSON.stringify(this.page.query));
            this.$refs.table.load();
            return;
          }
        });
      }
    },
    search() {
      this.getSearchParams();
      this.$refs.table.load();
      //this.$refs.tablesub.load();
    },
    cancel() {
      this.dateRange = [];

      this.page.query.param = {
        isDeleted: false,
      };
      this.search();
    },

    clickRow(row) {
      this.row = row;
      // console.log(JSON.stringify(row));
      if (this.fatherMethodShowSub) {
        this.fatherMethodShowSub(row);
      }
    },
  },

  created() {},
  mounted() {
    this.$on("init", this.init);
  },
};
</script>
